<template>
	<div>
		<cl-crud @load="onLoad" class="content">
			<template #table-column-goodInfo="{scope}">
				<good-info :item="scope.row"></good-info>
			</template>
			<template #table-column-couponInfo="{scope}">
				<coupon-info :item="scope.row"></coupon-info>
			</template>

			<template #table-column-platform="{scope}">
				{{ scope.row.source | dict_platform }}
			</template>

			<template #table-column-ysqLevel="{scope}">
				{{ scope.row.level }}
			</template>
			<template #table-column-backgroundUrl="{scope}">
				<el-image class="code-img" :src="scope.row.backgroundUrl | image_ali"></el-image>
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	name: 'open_crud',
	data() {
		return {
			crud: null
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.specialClassify)
				.set('dict', {
					label: {
						delete: '删除'
					}
				})
				.set('table', {
					columns: [
						{
							label: '分类名',
							prop: 'mainName',
							align: 'center'
						},
						{
							label: '分类id',
							prop: 'floorId',
							align: 'center'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center'
						},
						{
							label: '分类背景图',
							prop: 'backgroundUrl',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'floorId',
							label: '分类id',
							component: {
								name: 'el-input',
								attrs: {
									disabled: false
								}
							}
						},
						{
							prop: 'mainName',
							label: '分类名称',
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'level',
							label: '排序',
							value: 100,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'backgroundUrl',
							label: '分类背景图',
							component: {
								name: 'cl-upload'
							},
							rules: {
								required: true,
								message: '分类背景图'
							}
						}
					]
				})
				.set('layout', [['refresh-btn', 'add-btn', 'query', 'flex1'], ['data-table']])
				.on('open', isEdit => {
					if (isEdit) {
						app.setData('upsert.items[prop:floorId].component.attrs.disabled', true);
					} else {
						app.setData('upsert.items[prop:floorId].component.attrs.disabled', false);
					}
				})
				.on('submit', (isEdit, data, { next, done }) => {
					next({
						specialType: 106,
						...data
					});
				})
				.done();

			app.refresh({
				prop: 'level',
				order: 'asc',
				specialType: '106'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 600px;
}
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.code-img {
	width: 150px;
	height: 100px;
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}
.el-select {
	width: 100px;
}
</style>
